
<template>
  <div class="planning-container">
    <!-- 顶部导航 -->
    <el-menu
      mode="horizontal"
      :router="true"
      :default-active="activeMenu"
      class="planning-menu"
    >
      <el-menu-item index="/planning/demand">
        <el-icon><TrendCharts /></el-icon>
        需求预测
      </el-menu-item>
      <el-menu-item index="/planning/capacity">
        <el-icon><Cpu /></el-icon>
        运力规划
      </el-menu-item>
      <el-menu-item index="/planning/route-optimization">
        <el-icon><Position /></el-icon>
        路线优化
      </el-menu-item>
      <el-menu-item index="/planning/schedule">
        <el-icon><Calendar /></el-icon>
        排班计划
      </el-menu-item>
      <el-menu-item index="/planning/simulation">
        <el-icon><VideoPlay /></el-icon>
        方案模拟
      </el-menu-item>
    </el-menu>

    <!-- 面包屑导航 -->
    <div class="breadcrumb-container">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>运输规划</el-breadcrumb-item>
        <el-breadcrumb-item>{{ currentMenuTitle }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 子路由出口 -->
    <div class="planning-content">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>

    <!-- 全局统计信息 -->
    <el-drawer
      v-model="statsDrawer"
      title="规划统计"
      direction="rtl"
      size="400px"
    >
      <div class="stats-content">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-statistic title="本月计划总数" :value="monthlyStats.totalPlans">
              <template #suffix>个</template>
            </el-statistic>
          </el-col>
          <el-col :span="12">
            <el-statistic title="待执行计划" :value="monthlyStats.pendingPlans">
              <template #suffix>个</template>
            </el-statistic>
          </el-col>
        </el-row>

        <el-divider />

        <h4>运力分配</h4>
        <el-progress
          :percentage="monthlyStats.capacityUsage"
          :format="format => format + '%'"
          :stroke-width="15"
          status="success"
        />

        <el-divider />

        <h4>计划完成率</h4>
        <div class="completion-chart">
          <!-- 这里可以集成图表组件显示计划完成情况 -->
          <el-empty description="图表加载中...">
            <template #image>
              <el-icon style="font-size: 40px"><DataLine /></el-icon>
            </template>
          </el-empty>
        </div>

        <el-divider />

        <h4>近期计划</h4>
        <el-timeline>
          <el-timeline-item
            v-for="plan in recentPlans"
            :key="plan.id"
            :timestamp="plan.time"
            :type="plan.status === 'completed' ? 'success' : 'primary'"
          >
            {{ plan.title }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-drawer>

    <!-- 悬浮操作按钮 -->
    <div class="floating-actions">
      <el-button-group>
        <el-button 
          type="primary" 
          circle
          @click="statsDrawer = true"
        >
          <el-icon><DataLine /></el-icon>
        </el-button>
        <el-button 
          type="success" 
          circle
          @click="createNewPlan"
        >
          <el-icon><Plus /></el-icon>
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  TrendCharts,
  Cpu,
  Position,
  Calendar,
  VideoPlay,
  DataLine,
  Plus
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 当前激活的菜单项
const activeMenu = computed(() => route.path)

// 当前菜单标题
const currentMenuTitle = computed(() => {
  const menuTitles = {
    '/planning/demand': '需求预测',
    '/planning/capacity': '运力规划',
    '/planning/route-optimization': '路线优化',
    '/planning/schedule': '排班计划',
    '/planning/simulation': '方案模拟'
  }
  return menuTitles[route.path] || '运输规划'
})

// 统计抽屉
const statsDrawer = ref(false)

// 月度统计数据
const monthlyStats = ref({
  totalPlans: 156,
  pendingPlans: 45,
  capacityUsage: 78
})

// 近期计划
const recentPlans = ref([
  {
    id: 1,
    title: '上海-南京线路优化计划',
    time: '2025-03-14 10:00',
    status: 'completed'
  },
  {
    id: 2,
    title: '节假日运力补充计划',
    time: '2025-03-15 09:00',
    status: 'pending'
  },
  {
    id: 3,
    title: '城市配送路线规划',
    time: '2025-03-16 14:00',
    status: 'pending'
  }
])

// 创建新计划
const createNewPlan = () => {
  router.push('/planning/route-optimization')
  ElMessage.success('请选择规划类型开始创建')
}
</script>

<style scoped>
.planning-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.planning-menu {
  border-bottom: solid 1px var(--el-menu-border-color);
  padding: 0 20px;
}

.breadcrumb-container {
  padding: 16px 20px;
  background-color: var(--el-bg-color-page);
  border-bottom: 1px solid var(--el-border-color-light);
}

.planning-content {
  flex: 1;
  overflow: auto;
  background-color: var(--el-bg-color-page);
  position: relative;
}

/* 路由切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.floating-actions {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 100;
}

.stats-content {
  padding: 20px;
}

.stats-content h4 {
  margin: 16px 0;
  color: var(--el-text-color-primary);
}

.completion-chart {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--el-bg-color-page);
  border-radius: 4px;
}

:deep(.el-menu-item) {
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.el-menu--horizontal) {
  border-bottom: none;
}

:deep(.el-menu-item.is-active) {
  font-weight: 500;
}

:deep(.el-timeline-item__content) {
  color: var(--el-text-color-regular);
}

:deep(.el-timeline-item__timestamp) {
  color: var(--el-text-color-secondary);
}
</style>